<template>
  <div class="video-wall flex flex-column">
    <div class="flex-auto-height" style="width: 100%">
      <wall-grid :type="activeItem" id="wallGrid">
        <template #default="{ index }">
          <player v-if="showList[index]" :data="showList[index]" />
          <empty v-else />
        </template>
      </wall-grid>
    </div>
    <div class="flex-fixed flex flex-align-center flex-between video-wall-btn">
      <div class="flex flex-align-center">
        <div
          v-for="item of Object.keys(btnObj)"
          @click="() => (activeItem = item)"
          style="margin-right: 15px; cursor: pointer"
        >
          <img :src="btnObj[item][item == activeItem ? 'active' : 'normal']" />
        </div>
      </div>
      <div>
        <img src="./assets/video_bt_full.png" @click="clickFullscreen" />
      </div>
    </div>
  </div>
</template>

<script>
import win1 from './assets/video_bt_win1.png';
import win1S from './assets/video_bt_win1_s.png';
import win4 from './assets/video_bt_win4.png';
import win4S from './assets/video_bt_win4_s.png';
import win6 from './assets/video_bt_win6.png';
import win6S from './assets/video_bt_win6_s.png';
import win9 from './assets/video_bt_win9.png';
import win9S from './assets/video_bt_win9_s.png';
import win16 from './assets/video_bt_win16.png';
import win16S from './assets/video_bt_win16_s.png';
import WallGrid from './wall-grid.vue';

import Fullscreen from '@gis/lib/utils/Fullscreen.js';
const fullscreen = new Fullscreen();

import { plentyEngineeringDetail } from '@gis/lib/api';
import { handleCommonRes } from '@gis/lib/utils/resolver.js';
import player from '@gis/lib/components/player/index.jsx';

export default {
  name: 'video-wall',
  components: { WallGrid, player },
  props: { monitorList: { type: Array, default: () => [] } },
  data() {
    return {
      isFullscreen: true,
      activeItem: 1,
      btnObj: {
        1: { normal: win1, active: win1S },
        4: { normal: win4, active: win4S },
        6: { normal: win6, active: win6S },
        9: { normal: win9, active: win9S },
        16: { normal: win16, active: win16S },
      },
      showList: [],
    };
  },
  watch: {
    activeItem: {
      immediate: true,
      handler(val) {
        this.$emit('gridChange', val);
      },
    },
    monitorList: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          // 取消选中，先删除
          this.showList = this.showList.filter((item) => newVal.indexOf(item.monitor_id) >= 0);
          // console.log(this.showList, '此时的showList');
          // 此时的showList的key
          let showListKey = this.showList.map((item) => item.monitor_id);
          // 选中，没有在showList列表里面的
          let notExist = newVal.filter((item) => showListKey.indexOf(item) < 0);
          // console.log(notExist, '没有加入数组的');
          if (notExist && notExist.length) {
            notExist.forEach((item) => {
              this.getVideoDetails({ monitor_id: item });
            });
          } else {
            console.log(this.showList, '最终showList - delete');
          }
        }
      },
    },
  },
  methods: {
    async getVideoDetails(params) {
      const data = await handleCommonRes(plentyEngineeringDetail, params, { defaultValue: {} });
      this.showList.push(data);
      console.log(this.showList, '最终showList - add');
    },
    clickFullscreen() {
      let element = document.getElementById('wallGrid');
      fullscreen.isFullScreen() ? fullscreen.exit(element) : fullscreen.enter(element);
      this.isFullscreen = fullscreen.isFullScreen();
    },
  },
};
</script>

<style scoped lang="less">
.video-wall {
  width: 100%;
  height: 100%;
  .item {
    float: left;
    border: 1px solid #5bb0ff;
  }
  &-btn {
    width: 100%;
    padding: 10px 20px;
  }
}
</style>
